<template>
  <div class="signIn">
    <el-form class="signBox" label-width="auto" :rules="rules" ref="signUpform" :model="signUpform">
      <el-form-item class="aMargin" prop="companyName">
        <el-input
          prefix-icon="el-icon-user"
          type="text"
          placeholder="请输入企业名称"
          v-model="signUpform.companyName"
        />
      </el-form-item>
      <el-form-item class="aMargin" prop="eMail">
        <el-input prefix-icon="el-icon-lock" placeholder="请输入企业邮箱" v-model="signUpform.eMail" />
      </el-form-item>
      <el-form-item class="aMargin" prop="bizLicense">
        <el-upload
          class="upload-demo"
          :action="upLoadUrl"
          :on-success="upPicSuccess"
          :before-upload="upPicBefore"
          :on-remove="handleRemove"
          name="img"
        >
          <el-button size="small" type="primary">点击上传工商执照</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </el-form-item>
      <el-form-item class="aMargin" prop="contacts">
        <el-input prefix-icon="el-icon-lock" placeholder="请输入企业联系人" v-model="signUpform.contacts" />
      </el-form-item>
      <el-form-item class="aMargin" prop="idCard">
        <el-input prefix-icon="el-icon-lock" placeholder="请输入证件号" v-model="signUpform.idCard" />
      </el-form-item>
      <el-form-item class="aMargin" prop="phone">
        <el-input prefix-icon="el-icon-lock" placeholder="请输入手机号" v-model="signUpform.phone"></el-input>
      </el-form-item>
      <el-form-item class="aMargin" prop="sendcode">
        <el-input prefix-icon="el-icon-lock" placeholder="请输入验证码" v-model="signUpform.sendcode">
          <template slot="append" v-if="!hasCode">
            <div @click="getCode">获取验证码</div>
          </template>
          <template slot="append" v-else>
            <span>{{time}}s后重新获取</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item class="aMargin" prop="passWord">
        <el-input
          prefix-icon="el-icon-lock"
          type="password"
          placeholder="请设置密码"
          v-model="signUpform.passWord"
        />
      </el-form-item>
      <el-form-item class="aMargin">
        <el-button type="primary" class="btn" @click="onRegit('signUpform')">注册</el-button>
        <span class="NoUser" @click="goSignIn">已有账号，去登录 >></span>
      </el-form-item>
    </el-form>
    <div class="loginTips">绿图科技有限公司版权所有</div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      signUpform: {
        companyName: "", // 企业名称；
        eMail: "", // 邮箱；
        bizLicense: "", // 营业执照；
        contacts: "", //  联系人；
        idCard: "", //  证件号；
        phone: "", // 手机号；
        passWord: "", //  密码；
        state: "0",
        power: "0",
        sendcode: "",
      },
      code: "", //发送过来的验证码
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        companyName: [
          { required: true, message: "企业名称不可为空", trigger: "blur" },
        ],
        eMail: [
          { required: true, message: "邮箱不可为空", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
        ],
        bizLicense: [
          { required: true, message: "营业执照不可为空", trigger: "blur" },
        ],
        contacts: [
          { required: true, message: "联系人不可为空", trigger: "blur" },
        ],
        idCard: [
          { required: true, message: "证件号不可为空", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              let sfz = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/;
              if (sfz.test(value) == false) {
                callback(new Error("请输入正确的证件号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "手机号不可为空", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              let sj = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
              if (sj.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        sendcode: [
          { required: true, message: "验证码不可为空", trigger: "blur" },
        ],
        passWord: [
          { required: true, message: "密码不可为空", trigger: "blur" },
        ],
      },
      hasCode: false,
      time: 60,
      upLoadUrl: this.$url + "/sbr/match/uploadImg",
    };
  },
  methods: {
    upPicSuccess(v) {
      this.signUpform.bizLicense = v.data.filePath;
    },
    handleRemove(file) {
      let pp = this.signUpform.bizLicense.split("/");
      pp = this.$Base64.encode(pp[pp.length - 1]);
      this.$axios.get("/sbr/match/delImg?fileName=" + pp);
    },
    upPicBefore(file) {
      let pp = this.signUpform.bizLicense.split("/");
      pp = this.$Base64.encode(pp[pp.length - 1]);
      this.$axios.get("/sbr/match/delImg?fileName=" + pp);
      // const isJPG = file.type === "image/jpeg";
      const isLt1M = file.size / 1024 / 1024 < 5;

      // if (!isJPG) {
      //   this.$message.error("上传图片只能是 JPG 格式!");
      // }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 5MB!");
      }
      return isLt1M;
    },
    //手机验证发送验证码
    getCode() {
      const reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
      console.log(this.signUpform.phone);
      if (!this.signUpform.phone) {
        this.$message.warning("手机号不能为空");
        return;
      }
      if (!reg.test(this.signUpform.phone)) {
        this.$message.warning("请输入正确的手机号");
        return;
      } else {
        this.$axios
          .post("/match/message", {
            phone: this.signUpform.phone,
          })
          .then((res) => {
            this.code = res.data.data.code;
            this.$message.success("发送成功");
            this.hasCode = true;
            this.time = 59;
            this.timer();
          });
      }
    },
    timer() {
      let that = this;
      if (that.time > 1) {
        that.time--;
        setTimeout(that.timer, 1000);
      } else {
        this.time = 0;
        this.hasCode = false;
      }
    },
    onRegit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.signUpform.sendcode == this.code) {
            delete this.signUpform.sendcode;
            this.$axios
              .post("/org/client/logon", this.signUpform)
              .then((res) => {
                this.$message.success("");
                this.$alert("返回登录", "注册成功", {
                  confirmButtonText: "确定",
                  callback: (action) => {
                    this.$router.replace("/home");
                  },
                });
              });
          } else {
            this.$message.error("请输入正确验证码");
          }
        } else {
          return false;
        }
      });
    },
    goSignIn(){
      this.$router.replace('/')
    }
  },
  created() {},
};
</script>
<style scoped>
.signIn {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  position: absolute;
  overflow: hidden;
}
.signBox {
  padding: 25px;
  border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  min-width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 10px;
}
.aMargin {
  margin-bottom: 20px;
}
.aMargin.l {
  margin-bottom: 0;
}
.btn {
  width: 100%;
}
.NoUser {
  cursor: pointer;
  float: right;
  color: #888;
}
.loginTips {
  position: absolute;
  bottom: 10px;
  text-align: center;
  width: 100%;
}
</style>
